<template>
  <!-- 动态绑定类名，设置相对应的类名 -->
  <input
    v-bind:value="value"
    :[attr]="{ success: isOK, error: !isOK }"
    @input="inputFn"
    @blur="blurFn"
    class="hmInput"
    type="text"
  />
  <!-- <input v-model="value" class="hmInput" type="text" /> -->
</template>


<script>
export default {
  // 不可以随意修改props的数据(单向数据流)
  //表是props里面的数据可以是字符串也可以是数字
  props: {
    value: [String, Number],
    reg: {
      type: RegExp,
      default: () => {
        return /^.{1,}$/;
      },
    },
  },

  data() {
    return {
      isOK: true,
      // attr 表示将来要设置的标签属性名
      attr: "",
    };
  },
  created () {
    if(this.reg.test(this.value)){
          this.isOK = true
    }else{
      this.isOK = false
    }
  },
  methods: {
    inputFn(e) {
      console.log(40, e.target.value);

      this.$emit("input", e.target.value);
    },
    blurFn() {
      // 动态给输入框添加这个属性
      this.attr = "class";
      //   console.log(13, this.value);
      // 在函数中判断用户输入的内容是否合法，
      // 合法则为isOK=true,否则为isOK=false
      //   let reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
      if (this.reg.test(this.value)) {
        this.isOK = true;
      } else {
        this.isOK = false;
      }
    },
  },
};
</script>


<style lang="less" scoped>
.hmInput {
  width: 100%;
  border: none;
  border-bottom: 1px solid #666;
  color: #666;
  line-height: 2;
  font-size: 16px;
}
.success {
  color: green;
  border-bottom-color: green;
}
.error {
  color: red;
  border-bottom-color: red;
}
</style>